<template>
  <div class="gl_contentBox gl_heightFull">
    <div v-loading="loading" class="content">
      <el-form ref="InsuranceVO" class="gl_form_mini form_height" :model="InsuranceVO" :rules="InsuranceVO_Rules" label-width="170px">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form-item label="平台赛事保险费用设置：" prop="isEnabled">
              <el-radio-group v-model="InsuranceVO.isEnabled" @change="changeRadio">
                <el-radio :label="false">关闭</el-radio>
                <el-radio :label="true">开启</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="InsuranceVO.isEnabled" :gutter="20">
          <el-col :span="22">
            <el-form-item label="保险费用：" prop="amount">
              <el-input v-model="InsuranceVO.amount" clearable type="text" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" justify="center">
        <el-col :span="22" align="right">
          <el-button :loading="btnLoading" type="primary" size="small" @click="submitData('InsuranceVO')">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import validator from '@/lib/validate/index.js';
import {
  api_GET_EventsManagementInsuranceChargeSetting,
  api_POST_EventsManagementInsuranceChargeSetting
} from '@/extend/api/game.js'; // api接口

export default {
  name: 'InsuranceChargeSetting',
  data() {
    return {
      loading: false,
      btnLoading: false,
      InsuranceVO: {
        isEnabled: false,
        amount: 0
      },
      InsuranceVO_Rules: {
        amount: [
          { required: true, message: '保险费用不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPrice(value, '请输入正确的保险费用'));
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    // 查询设置
    getSetting() {
      var that = this;
      that.loading = true;
      api_GET_EventsManagementInsuranceChargeSetting().then(res => {
        that.loading = false;
        if (res) {
          that.InsuranceVO.isEnabled = res.isEnabled;
          that.InsuranceVO.amount = (res.amount / 100).toFixed(2);
        }
      }).catch(res => {
        that.loading = false;
        that.$message({
          message: '查询保险费用设置 ' + res.error.message,
          type: 'error'
        });
      });
    },
    changeRadio() {
      this.InsuranceVO.amount = 0;
      this.$refs['InsuranceVO'].clearValidate();
    },
    submitData(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          var that = this;
          that.btnLoading = true;
          const form = {
            isEnabled: that.InsuranceVO.isEnabled,
            amount: that.InsuranceVO.amount * 100
          };
          api_POST_EventsManagementInsuranceChargeSetting(form).then(res => {
            that.btnLoading = false;
            that.$message({
              message: '保险费用设置修改成功',
              type: 'success'
            });
            that.getSetting();
          }).catch(res => {
            that.btnLoading = false;
            that.$message({
              message: '保险费用设置修改失败 ' + res.error.message,
              type: 'error'
            });
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.content {
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 9%);
  padding: 15px;
  width: 40%;
  height: 300px;
}
.form_height {
  height: 200px;
}
</style>
